<template>
	<uni-popup ref="pupop" :type="type" background-color="#fff" border-radius="10px 10px 0 0" :safe-area="true">
		<view class="pupop-header">
			<text v-if="title" class="pupop-header__title">{{ title }}</text>
			<view class="pupop-header__close" @click="handleClose">
				<uni-icons type="closeempty" size="16"></uni-icons>
			</view>
		</view>
		<slot></slot>
	</uni-popup>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
const props = defineProps({
	type: {
		type: String,
		default: 'bottom'
	},
	autoOff: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: undefined
	},
	showClose: {
		type: Boolean,
		default: false
	}
});
const pupop = ref();
const modelValue = defineModel('modelValue', {
	type: Boolean,
	default: false
});

const titleHeight = computed(() => {
	if (props.title) return `88rpx`;
	return `44rpx`;
});

watch(modelValue, (val) => {
	if (val) {
		pupop.value.open();
	} else {
		if (props.autoOff) {
			setTimeout(() => pupop.value.close(), 500);
		} else {
			pupop.value.close();
		}
	}
});

function handleClose() {
	modelValue.value = false;
}
</script>

<style lang="scss" scoped>
.pupop-header {
	width: 100%;
	text-align: center;
}
.pupop-header__title {
	height: v-bind(titleHeight);
	line-height: v-bind(titleHeight);
	font-size: 32rpx;
	font-weight: bold;
}
.pupop-header__close {
	position: absolute;
	top: 24rpx;
	right: 24rpx;
}
</style>
